<!--个人中心-->
<template>
  <div class="app-container profile-container">
    <div class="profile-base-container">
      <div class="user-info-card common-card-container">
        <div style="text-align:right">
          <el-tooltip class="item" effect="dark" content="获取最新用户信息" placement="bottom">
            <i class="el-icon-refresh" style=" font-size: 17px;cursor: pointer;" @click="fetchUserInfo" />
          </el-tooltip>
        </div>
        <div class="user-info-head">
          <div class="user-avatar">
            <img style="" :src="common.getFileView(userShowInfo.avatar)" size="small" data-default="avatar" @error="handleImageError" @click="handleUploadAvatar">
          </div>
          <div v-if="userShowInfo.nickName" class="user-name">{{ userShowInfo.nickName }}</div>
          <div v-else class="user-name color-default">请设置昵称</div>
          <div v-if="userShowInfo.introduction" class="user-info-desc"> {{ userShowInfo.introduction }} </div>
          <div v-else class="user-info-desc color-default"> 暂无自我介绍 </div>
        </div>
        <div class="user-info-list">
          <div class="user-info-item">
            <i class="el-icon-user" />
            <span>{{ userShowInfo.realName }} </span>
          </div>
          <div class="user-info-item">
            <i class="el-icon-mobile" />
            <span>{{ userShowInfo.mobile }} </span>
          </div>
          <div class="user-info-item">
            <i class="el-icon-set-up" />
            <span>
              <el-tag v-for="role in userRoles" :key="role.id" effect="plain" type="primary" style="margin-right: 5px;margin-bottom: 5px;">{{ role.name }}</el-tag>
            </span>
          </div>
          <div class="user-info-item">
            <i class="el-icon-office-building" />
            <span v-if="upmsOrganizations.length===0" class="color-danger  common-cursor"> 还未加入任何组织 </span>
            <span v-else>
              <el-tag v-for="org in upmsOrganizations" :key="org.id" effect="plain" :type="org.type===1?'primary':'danger'" style="margin-right: 5px;margin-bottom: 5px;">{{ org.organizationName }}</el-tag>
            </span>
          </div>
          <div class="user-info-item">
            <i class="el-icon-postcard" />
            <span v-if="userShowInfo.signature">{{ userShowInfo.signature }}</span>
            <span v-else class="color-default">暂无个性签名</span>
          </div>
          <div class="user-info-item">
            <i class="el-icon-location-information" />
            <span v-if="userShowInfo._currentResidenceLevel1">中国 • {{ userShowInfo._currentResidenceLevel1 }} • {{ userShowInfo._currentResidenceLevel2 }}</span>
            <span v-else class="color-default">暂无地址</span>
          </div>
          <div class="user-info-item">
            <i class="el-icon-price-tag" />
            <span v-if="userShowInfo.skill">{{ userShowInfo._skill }}  </span>
            <span v-else class="color-default">暂无技能</span>
          </div>
          <div class="user-info-item">
            <i class="el-icon-connection" />
            <span>
              钉钉:
              <span v-if="userShowInfo.dingTalkUserId" class="color-primary">{{ userShowInfo.dingTalkUserId }}</span>
              <span v-if="!userShowInfo.dingTalkUserId" class="color-danger">还未绑定</span>
              <span style="margin-right: 5px;" />
              企业微信:
              <span v-if="userShowInfo.wxWorkUserId" class="color-primary">{{ userShowInfo.wxWorkUserId }}</span>
              <span v-if="!userShowInfo.wxWorkUserId" class="color-danger">还未绑定</span>
            </span>
          </div>
        </div>
        <div style="margin: 30px 0px 20px;">
          <el-divider />
        </div>
        <div style="font-size: 16px;margin-bottom: 8px;justify-content:space-between" class="flex-row">
          <div>标签</div>
          <el-link :underline="false" icon="el-icon-plus" @click="handleCreateTag" />
        </div>
        <div class="user-info-tags">
          <template v-if="userShowInfo.tag">
            <el-tag v-for="item in userShowInfo.tag.split(',')" :key="item" effect="plain" type="info" closable @close="handleCloseTag(item)">{{ item }}</el-tag>
          </template>
        </div>
      </div>
    </div>
    <div class="profile-main-container common-card-container">
      <el-tabs v-model="selectedView" class="common-tabs" @tab-click="handleTabClick">
        <el-tab-pane v-for="item in views" :key="item.view" :label="item.name" :name="item.view" />
      </el-tabs>
      <div style="flex: 1;overflow: auto;margin-top: 15px;">
        <component :is="selectedView" :user="userRecord" @success="fetchUserInfo" />
      </div>
    </div>
  </div>
</template>
<script>
import company from './company'
import user from './user'
import avatar from './avatar'
import password from './password'
import mobile from './mobile'
import email from './email'
import loginLog from './loginLog'
export default {
  components: { company, user, avatar, password, mobile, email, loginLog },

  data() {
    return {
      selectedView: 'user',
      views: [
        { view: 'user', name: '用户资料', icon: 'icon-yonghuziliao' },
        { view: 'company', name: '企业信息', icon: 'icon-qiyexinxi' },
        { view: 'avatar', name: '修改头像', icon: 'icon-xiugaitouxiang' },
        { view: 'password', name: '修改密码', icon: 'icon-modify-password' },
        { view: 'mobile', name: '更换手机号', icon: 'icon-shouji_huaban1' },
        { view: 'email', name: '更换邮箱', icon: 'icon-youxiang' },
        { view: 'loginLog', name: '登录记录', icon: 'icon-denglujilu' }
      ],
      userShowInfo: {},
      userRecord: {},
      userRoles: [],
      upmsOrganizations: []
    }
  },
  created() {
    this.fetchUserInfo()
    var queryView = this.$route.query.view
    if (queryView) {
      var view = this.views.filter(item => {
        return item.view === queryView
      })
      if (view.length > 0) {
        this.selectedView = view[0].view
      }
    }
  },
  methods: {
    handleTabClick() {

    },
    handleUploadAvatar() {
      this.selectedView = 'avatar'
    },
    fetchUserInfo() {
      this.$store.dispatch('getCurrentUserDetailedInfo').then(res => {
        this.userRecord = Object.assign({}, res.user)
        var currentResidenceLevel = []
        var nativePlaceLevel = []
        if (this.userRecord.nativePlaceLevel1 && this.userRecord.nativePlaceLevel2 && this.userRecord.nativePlaceLevel3) {
          nativePlaceLevel = [this.userRecord.nativePlaceLevel1, this.userRecord.nativePlaceLevel2, this.userRecord.nativePlaceLevel3]
        }
        if (this.userRecord.currentResidenceLevel1 && this.userRecord.currentResidenceLevel2 && this.userRecord.currentResidenceLevel3 && this.userRecord.currentResidenceLevel4) {
          currentResidenceLevel = [this.userRecord.currentResidenceLevel1, this.userRecord.currentResidenceLevel2, this.userRecord.currentResidenceLevel3, this.userRecord.currentResidenceLevel4]
        }
        this.userRecord = {
          ...res.user,
          currentResidenceLevel: currentResidenceLevel,
          nativePlaceLevel: nativePlaceLevel,
          upmsOrganizations: res.organizations,
          skills: this.userRecord.skill ? this.userRecord.skill.split(',') : []
        }
        this.userShowInfo = Object.assign({}, this.userRecord)
        this.userRoles = res.roles
        this.upmsOrganizations = res.organizations
      })
    },
    handleUpdate() {
      var tempData = Object.assign({}, this.userRecord)
      delete tempData.upmsOrganizations
      delete tempData.upmsRoles
      if (tempData.skills.length !== 0) {
        tempData = {
          ...tempData,
          skill: tempData.skills.join(',')
        }
      }
      delete tempData.skills
      delete tempData.nativePlaceLevel
      delete tempData.currentResidenceLevel
      this.$store.dispatch('modifyPersonInfo', tempData).then(response => {
        this.$modal.msgSuccess('修改成功')
        this.fetchUserInfo()
      }).catch(() => {
      })
    },
    handleCreateTag() {
      this.$prompt('请输入标签', '标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入标签',
        inputPattern: /^([a-zA-Z0-9\u4E00-\u9FA5\uf900-\ufa2d·s]).{1,10}$/,
        inputErrorMessage: '请输入1-10个汉字'
      }).then(({ value }) => {
        var tag = this.userRecord.tag
        if (tag) {
          tag = tag.split(',')
        } else {
          tag = []
        }
        tag.push(value)
        this.userRecord = {
          ...this.userRecord,
          tag: tag.join(',')
        }
        this.handleUpdate()
      }).catch(() => {

      })
    },
    handleCloseTag(tag) {
      if (!this.userRecord.tag) {
        this.$modal.msgWarning('暂无标签！')
        return
      }
      var tags = this.userRecord.tag.split(',').filter(item => {
        return item !== tag
      })
      this.userRecord = {
        ...this.userRecord,
        tag: tags.join(',')
      }
      this.handleUpdate()
    }
  }
}
</script>
<style lang="scss" scoped>
  .user-info-card{
    color: #606266;
    .user-avatar{
      width: 128px;
      height: 128px;
      margin: 0 auto;
      border-radius: 64px;
      overflow: hidden;
      border: 2px solid #eee;
      cursor: pointer;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .user-info-head{
      text-align: center;
    }
    .user-name{
      font-size: 24px;
      margin-top: 20px;
      font-weight: 400;
    }
    .user-info-desc{
      margin-top: 8px;
      line-height: 22px;
    }
    .user-info-list{
      margin-top: 30px;
      .user-info-item {
        margin-bottom: 10px;
        display: flex;
        align-items: baseline;
        i {
          margin-right: 10px;
          font-size: 16px;
        }
      }
    }
    .user-info-tags {
      .el-tag {
        margin: 10px 10px 0 0;
      }
    }
  }
  .profile-container{
    display: flex;
    flex-direction: row;
    .card-item{
      padding: 20px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .profile-base-container{
      width: 400px;
    }
    .profile-main-container{
      flex: 1;
      margin-left: 20px;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }
  }
</style>
